<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            width: 700px;
            height: 500px;
            text-align: center;
            margin-top: 100px;
            margin-left: 400px;
            background-color: aqua;
        }
        
        img {
            margin-top: 100px;
        }
        
        h3 {
            font-size: 50px;
        }
        
        .middle {
            line-height: 40px;
        }
    </style>
</head>
<script src="../lib/jquery/jquery-1.12.4.min.js"></script>

<body>
    <div class="wrap">
        <div class="head">
            <h3>
                <img src="./images/logo.jpg" alt=""> 美发管理系统
            </h3>
        </div>
        <form action="qq">
            <div class="middle">
                <div class="top">
                    <span>用户名</span>
                    <input type="text" name="username" class="user_name">
                </div>
                <div class="center">
                    <span>&nbsp;&nbsp; 密码</span>
                    <input type="text" name="password" class="password">
                </div>
            </div>
            <div class="db">
                <div>
                    <button class="dl">登录</button>
                    <button class="zc">注册</button>
                </div>
            </div>
        </form>
    </div>
    <script>
        $(".dl").click((e) => {
            e.preventDefault()
            $.ajax({
                method: "post",
                url: `${Baseurl}/login`,
                data: {
                    username: $(".user_name").val(),
                    password: $(".password").val()
                },
                success: function(data) {
                    console.log(data);
                    if (data == "登录成功！！") {
                        window.location = "./index.html"
                    } else {
                        alert("用户名或密码错误")
                    }
                }
            })
        })
    </script>
</body>

</html>